<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
    <style type="text/css">
        .layui-table-cell{height:40px;line-height:40px;}
        .layui-card-header{line-height: 0px;}
        .layui-col-xs4 {
            text-align: center;
            margin-top: 10px;
        }
        .grid-demo grid-demo-bg1 {
            font-size: 16px;
        }
        #child-row1,#child-row2,#child-row3,#child-row4,#child-row5,#child-row6 {
            margin-top: 5%;
            color: RGB(0,150,136);
            font-size: 34px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">统计图表</li>
            <li class="web-tab">充值点统计</li>
        </ul>
        <div class="layui-tab-content" style="height: 100%;">
            <div class="layui-tab-item layui-show">
                <div class="layui-row" style="background-color: white;display: flex;justify-content: space-around;">
                    <div class="layui-col-xs2" style="text-align: center;margin-top: 10px;cursor: pointer;" onclick="wy();">
                        <div class="grid-demo grid-demo-bg1">物业总数</div>
                        <div class="layui-row" id="child-row1">
                            <span id="wuyeCount"></span>
                        </div>
                    </div>
                    <div class="layui-col-xs2" style="text-align: center;margin-top: 10px;cursor: pointer;" onclick="qy();">
                        <div class="grid-demo grid-demo-bg1">企业总数</div>
                        <div class="layui-row" id="child-row2">
                            <span id="qiyeCount"></span>
                        </div>
                    </div>
                    <div class="layui-col-xs2" style="text-align: center;margin-top: 10px;cursor: pointer;" onclick="yg();">
                        <div class="grid-demo grid-demo-bg1">员工总数</div>
                        <div class="layui-row" id="child-row3">
                            <span id="staffCount"></span>
                        </div>
                    </div>
                </div>

                <div class="layui-row" style="background-color: white;margin-top: 10px;height: 300px;">
                    <div class="layui-col-xs6" style="height: 100%; width: 48%;">
                        <div class="chart" style="height: 100%; width: 100%;">
                            <div class="pie" id="czXf" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>
                    <div class="layui-col-xs6" style="height: 100%; width: 48%;">
                        <div class="chart" style="height: 100%; width: 100%;margin-left: 10%;">
                            <div class="pie" id="guoji" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-row" style="background-color: white;margin-top: 10px;height: 360px;display: flex;">
                    <div class="layui-col-xs6" style="height: 100%; width: 48%;">
                        <div class="chart" style="height: 100%; width: 100%;">
                            <div class="bar" id="czMonth" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>
                    <div class="layui-col-xs6" style="height: 100%; width: 48%;margin-left: 4%;">
                        <div class="chart" style="height: 100%; width: 100%;">
                            <div class="bar" id="xfMonth" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 充值点统计 -->
            <div class="layui-tab-item">
                <div class="layui-row" style="background-color: white;">
                    <div class="layui-col-xs3" style="text-align: center;margin-top: 10px;cursor: pointer;" onclick="rechargeStation();">
                        <div class="grid-demo grid-demo-bg1">充值点总数</div>
                        <div class="layui-row" id="child-row1">
                            <span id="rechargeCount"></span>
                        </div>
                    </div>
                    <div class="layui-col-xs3" style="text-align: center;margin-top: 10px;cursor: pointer;">
                        <div class="grid-demo grid-demo-bg1">累计充值金额</div>
                        <div class="layui-row" id="child-row2">
                            <span id="totalAmount"></span>
                        </div>
                    </div>
                    <div class="layui-col-xs3" style="text-align: center;margin-top: 10px;cursor: pointer;">
                        <div class="grid-demo grid-demo-bg1">今日充值金额</div>
                        <div class="layui-row" id="child-row3">
                            <span id="dayAmount"></span>
                        </div>
                    </div>
                    <div class="layui-col-xs3" style="text-align: center;margin-top: 10px;cursor: pointer;">
                        <div class="grid-demo grid-demo-bg1">本月充值金额</div>
                        <div class="layui-row" id="child-row3">
                            <span id="monthAmount"></span>
                        </div>
                    </div>
                </div>

                <div class="layui-row" style="background-color: white;margin-top: 10px;height: 300px;">
                    <div class="layui-col-xs12" style="height: 100%; width: 98%;">
                        <div class="chart" style="height: 100%; width: 100%;">
                            <div class="bar" id="rechargeAmount" style="height: 100%; width: 100%;"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-row" style="background-color: white;height: 370px;display: flex;">
                    <div class="layui-card-body" style="width: 98%">
                        <table class="layui-hide" id="rechargeStation" lay-filter="rechargeStation-table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../js/layui/layui.js"></script>
<script src="../js/layui/layui.all.js"></script>
<script src="../admin/viewstyle/js/echarts_min.js"></script>
<script src="../js/config.js"></script>
<script src="../js/token.js"></script>
<script>
    window.onload = function(){
        getCount();
        getCzxfData();
        getGuojiCount();
        getMonthData();

        getRechargeCount();
        getRechargeData();
        //getRechargeStationAmount();
    }
    function wy() {
        top.document.getElementById("mainframe").src="/admin/wuye/wuye.html";
    };
    function qy() {
        top.document.getElementById("mainframe").src="/admin/qiye/qiye.html";
    };
    function yg() {
        top.document.getElementById("mainframe").src="/admin/staff/staff.html";
    };
    function ym() {
        top.document.getElementById("mainframe").src="/admin/vaccine/vaccineJz.html";
    };
    function hsJc() {
        top.document.getElementById("mainframe").src="/admin/vaccine/hesuan.html";
    };
    function yx() {
        top.document.getElementById("mainframe").src="/admin/vaccine/yxJc.html";
    };
    function rechargeStation() {
        top.document.getElementById("mainframe").src="/admin/recharge_station/station_list.html";
    };
    // 获取充值和消费总和
    function getCzxfData() {
        var $ = layui.$;
        $.ajax({
            url:HOST+"statistical/getCzXfTotal" ,
            success:function(res){
                if(res.code == 1) {
                    var czTotalAmount = res.data.czTotalAmount;
                    var xfTotalAmount = res.data.xfTotalAmount;
                    getCzxf(czTotalAmount, xfTotalAmount);
                }
            }
        });
    }

    // 获取每个国籍人数
    function getGuojiCount() {
        var $ = layui.$;
        $.ajax({
            url:HOST+"statistical/getGuojiCount" ,
            success:function(res){
                if(res.code == 1) {
                    getGuojiPeople(res.data.lists);
                }
            }
        });
    }

    function getMonthData() {
        var $ = layui.$;
        $.ajax({
            url:HOST+"statistical/getDayAmountByMonth" ,
            success:function(res){
                if(res.code == 1) {
                    getCzMonth(res.data.cz,res.data.getYear,res.data.getMonth);
                    getXfMonth(res.data.xf,res.data.getYear,res.data.getMonth);
                }
            }
        });
    }

    function getRechargeData() {
        var $ = layui.$;
        $.ajax({
            url:HOST+"statistical/getRechargeAmount" ,
            success:function(res){
                if(res.code == 1) {
                    getRechargeAmount(res.data.rechargeStationList);
                }
            }
        });
    }

    function getCount () {
        var $ = layui.$;
        $.ajax({
            url:HOST+"statistical/getCount" ,
            success:function(res){
                if(res.code == 1) {
                    document.getElementById("wuyeCount").innerText = res.data.wuyeCount;
                    document.getElementById("qiyeCount").innerText = res.data.qiyeCount;
                    document.getElementById("staffCount").innerText = res.data.staffCount;
                }
            }
        });
    };


    function getRechargeCount () {
        var $ = layui.$;
        $.ajax({
            url:HOST+"statistical/getRechargeCount" ,
            success:function(res){
                if(res.code == 1) {
                    document.getElementById("rechargeCount").innerText = res.data.rechargeCount;
                    document.getElementById("totalAmount").innerText = res.data.totalAmount;
                    document.getElementById("dayAmount").innerText = res.data.dayAmount;
                    document.getElementById("monthAmount").innerText = res.data.monthAmount;
                }
            }
        });
    };


    function getCzxf(czTotalAmount, xfTotalAmount) {
        var myechart = echarts.init(document.getElementById('czXf'));
        option = {
            title: {
                text: '累计充值/消费比例图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: czTotalAmount, name: '累计充值'},
                        {value: xfTotalAmount, name: '累计消费'}
                    ],
                    label: {
                        normal: {
                            formatter: params => {
                                return (
                                    '{name|' + params.name + '}：{value|' +
                                    params.value + '}'
                                );
                            },
                            rich: {
                                font: {
                                    fontSize: 20,
                                    padding: [5, 0],
                                },
                                hr: {
                                    height: 0,
                                    borderWidth: 1,
                                    width: '100%',
                                }
                            }
                        },
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myechart.setOption(option);
    };

    function getGuojiPeople(data) {
        var myechart = echarts.init(document.getElementById('guoji'));
        option = {
            color: ['#ff7f50', '#009688', '#da70d6', '#32cd32', '#6495ed',
                '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
                '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
                '#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0',
                '#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'],

            title: {
                text: '各国人数统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                type:"scroll",
                orient: 'vertical',
                left:'10%',
                align:'left',
                top:'middle',
                textStyle: {
                    color:'#8C8C8C'
                },
            },
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    center: ["55%", "60%"],
                    data: (function(){
                        var res = [];
                        var len = data.length;
                        for(var i = 0,size = len;i < size;i ++) {
                            res.push({
                                //通过把result进行遍历循环来获取数据并放入Echarts中
                                name: data[i].guoji,
                                value: data[i].countPeople
                            });
                        }
                        return res;
                    })(),
                    label: {
                        normal: {
                            formatter: params => {
                                return (
                                    '{name|' + params.name + '}：{value|' +
                                    params.value + '}'
                                );
                            },
                            rich: {
                                font: {
                                    fontSize: 20,
                                    padding: [5, 0],
                                },
                                hr: {
                                    height: 0,
                                    borderWidth: 1,
                                    width: '100%',
                                }
                            }
                        },
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myechart.setOption(option);
        window.onresize = function (){
            window.location.reload();
        }
    };

    function getCzMonth(paramData,getYear,getMonth) {
        var myechart = echarts.init(document.getElementById('czMonth'));
        var dayList = [];
        var valueList = [];
        for (var index in paramData) {
            dayList.push(paramData[index].day + "日");
            valueList.push(paramData[index].dayAmount);
        }
        option = {
            title: {
                text: '本月充值' + '(' + getYear + '年' + getMonth + '月' + ')',
                x: 'left'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function(item) {
                    return item[0].axisValueLabel + '<br />' + '充值金额' + ': ' + item[0].data
                },
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: dayList,
                axisLabel: {
                    interval:0,//代表显示所有x轴标签显示
                }
            },
            yAxis: {
                type: 'value'
            },
            "dataZoom": [{
                "show": true,
                "height": 12,
                "xAxisIndex": [
                    0
                ],
                top:'92%',
                bottom:'8%',
                "start": 0,
                "end": 25,
                handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '110%',
                handleStyle:{
                    color:"#d3dee5",
                },
                textStyle:{
                    color:"#fff"},
                borderColor:"#90979c"
            }],
            series: [{
                data: valueList,
                type: 'bar',
                barWidth: 30,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,  //开启显示
                            position: 'top',  //在上方显示
                            textStyle: {  //数值样式
                                color: 'black',
                                fontSize: 12
                            }
                        }
                    }
                }
            }]
        };
        myechart.setOption(option);
        window.onresize = function (){
            window.location.reload();
        }
    }

    function getXfMonth(paramData,getYear,getMonth) {
        var myechart = echarts.init(document.getElementById('xfMonth'));
        var dayList = [];
        var valueList = [];
        for (var index in paramData) {
            dayList.push(paramData[index].day + "日");
            valueList.push(paramData[index].dayAmount);
        }
        option = {
            title: {
                text: '本月消费' + '(' + getYear + '年' + getMonth + '月' + ')',
                x: 'left'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function(item) {
                    return item[0].axisValueLabel + '<br />' + '消费金额' + ': ' + item[0].data
                },
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: dayList,
                axisLabel: {
                    interval:0,//代表显示所有x轴标签显示
                }
            },
            yAxis: {
                type: 'value'
            },
            "dataZoom": [{
                "show": true,
                "height": 12,
                "xAxisIndex": [
                    0
                ],
                top:'92%',
                bottom:'8%',
                "start": 0,
                "end": 25,
                handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '110%',
                handleStyle:{
                    color:"#d3dee5",

                },
                textStyle:{
                    color:"#fff"},
                borderColor:"#90979c"
            }],
            series: [{
                data: valueList,
                type: 'bar',
                barWidth: 30,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,  //开启显示
                            position: 'top',  //在上方显示
                            textStyle: {  //数值样式
                                color: 'black',
                                fontSize: 12
                            }
                        }
                    }
                }
            }]
        };
        myechart.setOption(option);
        window.onresize = function (){
            window.location.reload();
        }
    }

    var myechart2 = echarts.init(document.getElementById('rechargeAmount'));
    function getRechargeAmount(rechargeStationList) {
        var nameList = [];
        var valueList = [];
        for (var index in rechargeStationList) {
            nameList.push(rechargeStationList[index].name);
            valueList.push(rechargeStationList[index].amount);
        }

        option = {
            title: {
                text: '各充值点充值总额',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function(item) {
                    return item[0].axisValueLabel + '<br />' + '充值金额' + ': ' + item[0].data
                },
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: nameList,
                axisLabel: {
                    interval:0,//代表显示所有x轴标签显示
                }
            },
            yAxis: {
                type: 'value'
            },
            "dataZoom": [{
                "show": true,
                "height": 12,
                "xAxisIndex": [
                    0
                ],
                top:'92%',
                bottom:'8%',
                "start": 0,
                "end": 150,
                handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '110%',
                handleStyle:{
                    color:"#d3dee5",

                },
                textStyle:{
                    color:"#fff"},
                borderColor:"#90979c"
            }],
            series: [{
                data: valueList,
                type: 'bar',
                barWidth: 30,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,  //开启显示
                            position: 'top',  //在上方显示
                            textStyle: {  //数值样式
                                color: 'black',
                                fontSize: 12
                            }
                        }
                    }
                }
            }]
        };
        myechart2.setOption(option);
    };

    /*var myechart3 = echarts.init(document.getElementById('rechargeStationAmount'));
    function getRechargeStationAmount(rechargeStationList) {

        var nameList = [];
        var valueList = [];
        for (var index in rechargeStationList) {
            nameList.push(rechargeStationList[index].name);
            valueList.push(rechargeStationList[index].amount);
        }

        option = {
            //color: ["#70DDFF", "#FF9F6A", "#20D469", "#D083FF", "#FF8282", "#769CFF", "#FFCF55"],
            color: ["#37A1DA", "#31C5E9", "#67E0E3", "#9FE7B8", "#FEDB5B", "#FF9F7F", "#FB7293"],
            title: {
                text: '近12个月各充值点充值总额',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            legend: {
                // width: "60%",
                top: "10%",
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    lineStyle: { color: '#C4C4C4' }
                },
                axisLabel: {
                    textStyle: { color: '#333333', fontSize: 13 }
                },
                data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00']
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: { color: "#C4C4C4", type: "dashed" }
                },
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: {
                    textStyle: { color: '#333333', fontSize: 13 }
                }
            },
            "dataZoom": [{
                "show": true,
                "height": 12,
                "xAxisIndex": [
                    0
                ],
                top:'92%',
                bottom:'8%',
                "start": 0,
                "end": 50,
                handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '110%',
                handleStyle:{
                    color:"#d3dee5",

                },
                textStyle:{
                    color:"#fff"},
                borderColor:"#90979c"
            }],
            series: [{
                name: "page1",
                type: 'bar',
                stack: 'all',
                barWidth: "30%",
                data: [5, 3, 8, 9, 3, 7, 7, 1, 3, 2]
            }, {
                name: "page2",
                type: 'bar',
                stack: 'all',
                barWidth: "30%",
                data: [3, 4, 5, 2, 1, 10, 6, 1, 1, 1]
            }, {
                name: "page3",
                type: 'bar',
                stack: 'all',
                barWidth: "30%",
                data: [1, 3, 2, 4, 4, 2, 10, 9, 1, 6]
            }, {
                name: "page4",
                type: 'bar',
                stack: 'all',
                barWidth: "30%",
                data: [1, 10, 9, 8, 6, 9, 3, 2, 2, 7]
            }, {
                name: "page5",
                type: 'bar',
                stack: 'all',
                barWidth: "30%",
                data: [8, 5, 10, 2, 2, 4, 6, 7, 9, 2]
            }, {
                name: "page6",
                type: 'bar',
                stack: 'all',
                barWidth: "30%",
                data: [9, 10, 7, 5, 8, 1, 8, 1, 6, 7]
            }, {
                name: "page7",
                type: 'bar',
                stack: 'all',
                barWidth: "30%",
                data: [10, 5, 5, 7, 6, 2, 4, 2, 6, 6]
            }]
        };
        myechart3.setOption(option);
    };*/

    document.getElementsByClassName("web-tab")[0].onclick= function () {
        setTimeout(function () {//延迟0.3s
            myechart2.resize();//重新加载宽高
            //myechart3.resize();//重新加载宽高
        }, 100);
    }

    layui.use(['element','form','table'], function(){
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //充值点
        table.render({
            elem: '#rechargeStation'
            ,id:'rechargeStation-table-id'//重载需要
            ,url:HOST+'statistical/getCurrentRechargeAmount'
            ,title:'本年度各充值点充值金额'
            ,limits: [5,10,20,50,100]
            ,limit: 5
            ,cols: [[
                {type:'numbers', title: '序号'}
                ,{field:'operName',align : 'center',width : 125, title: '充值点名称'}
                ,{field:'jan',align : 'center', width : 105,title: '1月'}
                ,{field:'feb',align : 'center',width : 105, title: '2月'}
                ,{field:'mar',align : 'center',width : 105, title: '3月'}
                ,{field:'apr',align : 'center',width : 105,title: '4月'}
                ,{field:'may',align : 'center',width : 105, title: '5月'}
                ,{field:'jun',align : 'center',width : 105, title:'6月'}
                ,{field:'jul',align : 'center',width : 105, title:'7月'}
                ,{field:'aug',align : 'center',width : 105, title:'8月'}
                ,{field:'sep',align : 'center',width : 105, title:'9月'}
                ,{field:'oct',align : 'center',width : 105, title:'10月'}
                ,{field:'nov',align : 'center',width : 105, title:'11月'}
                ,{field:'dece',align : 'center',width : 105, title:'12月'}
                ,{field:'total',align : 'center',width : 115, title:'合计'}]]
            ,page: true
            ,page: {
                curr: layui.data("rechargeStation-table-id").index
            },
            done: (res, curr, count) => {
                layui.data("rechargeStation-table-id", {
                    key: 'index',
                    value: curr
                });
            }
        });

        //选项卡触发事件
        var active = {
            tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };
    });
</script>
<script>
    //原图预览
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],// area: [width + 'px',height+'px'],  //原图显示
            shadeClose:true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>

</body>
</html>